/** * 项目管理 * */
<template>
  <div class="w-table-search" @click="show">
    <form action="/">
      <van-search
        ref="search"
        v-model.trim="keyword"
        show-action
        placeholder="请输入搜索关键词"
        @search="save"
      >
        <template #action>
          <div @click="save">搜索</div>
        </template>
      </van-search>
    </form>
    <div class="list">
      <div v-for="(item, idx) in list" :key="idx" class="item" @click="setKeyword(item)">{{ item }}</div>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      keyword: '',
      storage: JSON.parse(window.localStorage.getItem(this.$route.query.path) || '[]'),
    }
  },
  computed: {

    // 一个计算属性的 getter
    list() {
      return this.storage.filter((item) => {
        return item.includes(this.keyword)
      })
    },
  },

  // 生命周期
  created() {},
  beforeUnmount() {},
  mounted() {
    this.$refs.search.focus()
  },

  // 方法
  methods: {
    save() {
      this.storage.push(this.keyword)
      window.localStorage.setItem(this.$route.query.path, JSON.stringify(this.storage))
      this.$router.push({
        path: this.$route.query.path,
        query: {
          keyword: this.keyword,
        },
      })
    },
    setKeyword(val) {
      this.keyword = val
      this.save()
    },
  },
}
</script>

<style lang="less" scoped></style>
